import React, { useImperativeHandle, forwardRef, useRef, useState } from 'react';
import { View, Text, StyleSheet, TextInput, Modal, TouchableHighlight } from 'react-native'
import { connect } from 'react-redux'
import { pTx } from "../utils/dimensions"
import { useRealm, useQuery } from '@realm/react'
import { schemaName } from "../realm"
import Realm from "realm"

const ModalName = forwardRef((props, ref) => {
    const realm = useRealm();
    const wallet = useQuery(schemaName.Wallet, wallet => {
        return wallet.filtered('current = true');
    })[0];
    const [modalVisible, setModalVisible] = useState(false);
    const [name, setName] = useState('')
    const textInputRefs = useRef(null)


    const show = () => {
        setModalVisible(true)
        setTimeout(() => {
            textInputRefs.current?.focus()
        }, 500)
    }

    const sendSure = () => {
        if (!name) return
        realm.write(() => {
            wallet.name = name
        });
        setModalVisible(false)
    }

    useImperativeHandle(ref, () => ({
        show,
    }))

    return (
        <Modal
            animationType="fade"
            transparent={true}
            visible={modalVisible}
            onRequestClose={() => {
                setModalVisible(!modalVisible);
            }}
        >
            <View style={styles.centeredView}>
                <View style={styles.modalView}>
                    <Text style={styles.name}>设置钱包名</Text>
                    <TextInput
                        ref={textInputRefs}
                        type={'text'}
                        value={name}
                        style={styles.textInputRefs}
                        placeholder="钱包名称"
                        onBlur={() => console.log("2222222222222")}
                        onChangeText={value => setName(value)}
                    >
                    </TextInput>

                    <View style={styles.footButton}>
                        <TouchableHighlight
                            style={[styles.openButton, styles.borderRight]}
                            underlayColor="rgba(0,0,0,0.1)"
                            onPress={() => {
                                setModalVisible(!modalVisible);
                            }}
                        >
                            <Text style={styles.textStyle}>取消</Text>
                        </TouchableHighlight>
                        <TouchableHighlight
                            style={styles.openButton}
                            onPress={sendSure}
                            underlayColor="rgba(0,0,0,0.1)"
                        >
                            <Text style={[styles.textStyle, { color: "#06C161" }]}>确定</Text>
                        </TouchableHighlight>
                    </View>
                </View>
            </View>
        </Modal>
    );
})

const mapStateToProps = (state) => state.wallet

const mapDispatchToProps = {
}


export default connect(mapStateToProps, mapDispatchToProps, null, { forwardRef: true })(ModalName)

const styles = StyleSheet.create({
    centeredView: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: "rgba(0,0,0,0.1)",
    },
    modalView: {
        width: pTx(280),
        backgroundColor: "white",
        borderRadius: pTx(6),
        shadowColor: "rgba(0,0,0,0.5)",
        shadowOffset: {
            width: 0,
            height: 1
        },
        shadowOpacity: 0.1,
        shadowRadius: 1,
        elevation: 5
    },
    name: {
        paddingVertical: pTx(20),
        fontSize: pTx(16),
        color: "#0A0C14",
        textAlign: "center"

    },
    textInputRefs: {
        marginHorizontal: pTx(15),
        paddingHorizontal: pTx(15),
        height: pTx(45),
        fontSize: pTx(16),
        backgroundColor: "#fff",
        borderRadius: pTx(4),
        borderWidth: 1,
        borderColor: "rgba(0,0,0,0.1)",

    },
    footButton: {
        flexDirection: 'row',
        justifyContent: "space-between",
        alignItems: "center",
    },
    openButton: {
        marginTop: pTx(20),
        flex: 1,
        flexDirection: 'row',
        justifyContent: "center",
        alignItems: "center",
        height: pTx(45),
        borderTopWidth: 1,
        borderTopColor: "rgba(0,0,0,0.1)",
    },
    borderRight: {
        borderRightWidth: 1,
        borderRightColor: "rgba(0,0,0,0.1)",
    },
    textStyle: {
        fontSize: pTx(16),
    }
})